<template>
    <div class="account-identity-name-page">
        <el-card shadow="never" class="mt-4">
            <el-button type="primary" @click="onAddClick">新增</el-button>
            <div class="mt-8" v-loading="loading">
                <el-table :data="data">
                    <el-table-column label="序号" type="index"/>
                    <el-table-column label="身份名称" prop="identity"/>
                    <el-table-column label="创建时间" prop="description">
                        <template slot-scope="{row}">
                            {{ row.created_at | formatTime }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="onAddClick(row.id)">编辑</el-button>
                            <el-button type="text" @click="onDeleteClick(row.id)" class="red-color">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    components: {},
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            data: [],
        };
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('company_identity').then((res) => {
                this.data = res;
            }).finally(() => {
                this.loading = false;
            });
        },
        onAddClick(id) {
            const params = typeof id === 'number' || typeof id === 'string' ? {id} : undefined;
            this.$router.push({
                name: 'CompanyIdentityNameDetail',
                params,
            });
        },
        onDeleteClick(id) {
            $ele.$confirm('是否删除此身份称呼？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`company_identity/${id}`).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => this.loading = false);
            }).catch(() => { });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.account-identity-name-page {
    .footer {
        height: 44px;
        background: #f7f7f7;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
}
</style>
